<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="商品大类" prop="productType">
        <el-select v-model="queryParams.productType" placeholder="请选择商品大类" clearable size="small">
          <el-option v-for="dict in productTypes" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发布用户" prop="userId">
        <el-select filterable v-model="queryParams.userId" placeholder="请选择发布用户" clearable size="small">
          <el-option v-for="dict in userList" :key="dict.userId" :label="dict.userName+':'+dict.phonenumber" :value="dict.userId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分销折扣范围" prop="minDiscount" label-width="96px">
        <el-input
          v-model="queryParams.minDiscount"
          clearable
          style="width:80px;"
          @keyup.enter.native="handleQuery"
        />~<el-input
          v-model="queryParams.maxDiscount"
          clearable
          style="width:80px;"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="所属商铺" prop="shopId">
        <treeselect v-model="queryParams.shopId" :options="deptOptions" :normalizer="normalizer" placeholder="选择所属商铺" style="width:215px"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          @click="handleType"
          v-hasPermi="['system:dict:edit']"
        >商品大类</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          @click="handleLabel"
          v-hasPermi="['system:dict:edit']"
        >商品标签</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:product:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['system:product:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:product:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:product:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="productList" @selection-change="handleSelectionChange" ref="table" @sort-change="sortChange">      
      <el-table-column type="selection" width="40" align="center"/>
      <el-table-column label="排序号" align="center" prop="orderNum" sortable="custom" width="90"/>
      <el-table-column label="商品名称" align="left" prop="productTitle"/>
      <el-table-column label="缩略图" align="center" prop="fileFj" width="160">
        <template slot-scope="scope">
          <imageUpload v-model="scope.row.fileFj" :noDel="false" :table="scope.row.id+':'+'product'+':'+'pic'+':'+scope.row.picId"/>
        </template>
      </el-table-column>
      <el-table-column label="是否视频" align="left" prop="isVideo" :formatter="getYesNo"/>
      <el-table-column label="商品标签" align="left" prop="labelName"/>
      <el-table-column label="商品大类" align="center" prop="productType" width="120" :formatter="getProductType"/>
      <el-table-column label="商品价格" align="center" prop="productPrice" width="100" sortable="custom"/>
      <el-table-column label="商品折扣" align="center" prop="productDiscount" width="100" sortable="custom"/>
      <el-table-column label="分销折扣" align="center" prop="discount" width="100" sortable="custom"/>
      <el-table-column label="梯度比率" align="center" prop="discountBl" width="100" sortable="custom"/>
      <el-table-column label="所属商铺" align="left" prop="shopName" width="100"/>
      <el-table-column label="发布用户" align="left" prop="userName" width="80"/>
      <el-table-column label="头像" align="center" prop="userPic" width="50">
        <template slot-scope="scope">
          <img :src="'data:image/png;base64,'+scope.row.userPic" class="user-avatar"/>
        </template>  
      </el-table-column>
      <el-table-column label="创建日期" align="center" prop="createTime" width="140" sortable="custom">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="240">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:product:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:product:remove']"
          >删除</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-document"
            @click="handleUpdateUpload(scope.row)"
            v-hasPermi="['system:product:edit']"
          >查看</el-button>
          <el-button
            size="mini"
            type="text"            
            @click="creatQrCode(scope.row)"
            v-hasPermi="['system:product:edit']"
          >生成二维码</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改商品信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="商品名称" prop="productTitle">
              <el-input v-model="form.productTitle" placeholder="请输入商品名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="商品描述" prop="productDesc">
              <el-input v-model="form.productDesc" type="textarea" placeholder="请输入商品描述" :autosize="{minRows:5,maxRows:10}"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="form.parentId!=0">
          <el-col :span="24">
            <el-form-item label="详细描述" prop="productDetail">
              <el-input v-model="form.productDetail" type="textarea" placeholder="请输入详细描述公众号链接" :autosize="{minRows:5,maxRows:10}"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品标签" prop="labelId">
              <el-select filterable v-model="form.labelId" placeholder="请选择商品标签" clearable style="width:100%;" multiple>
                <el-option v-for="dict in productLabels" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品大类" prop="productType">
              <el-select v-model="form.productType" placeholder="请选择商品大类" clearable style="width:100%;" @change="selectBType">
                <el-option v-for="dict in productTypes" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品中类" prop="productTypem">
              <el-select v-model="form.productTypem" placeholder="请选择商品中类" clearable style="width:100%;" @change="selectMType">
                <el-option v-for="dict in productTypems" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品小类" prop="productTyped">
              <el-select v-model="form.productTyped" placeholder="请选择商品小类" clearable style="width:100%;">
                <el-option v-for="dict in productTypeds" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品价格" prop="productPrice">
              <el-input v-model="form.productPrice" placeholder="请输入商品价格"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品折扣" prop="productDiscount">
              <el-input v-model="form.productDiscount" placeholder="请输入商品折扣"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="分销折扣" prop="discount">
              <el-input v-model="form.discount" placeholder="请输入分销折扣" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="梯度比率" prop="discountBl">
              <el-input v-model="form.discountBl" placeholder="请输入梯度比率" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否视频" prop="isVideo">
              <el-select v-model="form.isVideo" placeholder="请选择是否视频" clearable style="width:100%;">
                <el-option v-for="dict in yesNo" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发布用户" prop="userId">
              <el-select filterable v-model="form.userId" placeholder="请选择发布用户" clearable style="width:100%;">
                <el-option v-for="dict in userList" :key="dict.userId" :label="dict.userName+':'+dict.phonenumber" :value="dict.userId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="排序号" prop="orderNum">
              <el-input v-model="form.orderNum" placeholder="请输入排序号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属商铺" prop="shopId">
              <treeselect v-model="form.shopId" :options="deptOptions" :normalizer="normalizer" placeholder="选择所属商铺" style="width:100%;"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="titleUpload" :visible.sync="openUpload" width="800px" append-to-body>
      <div class="sketch_content">
        <ul>
          <el-button icon="el-icon-plus" size="mini" @click="handleAddUpload">新增</el-button>
          <el-button icon="el-icon-document" size="mini" @click="cancelUpload">取消</el-button>
          <el-table v-loading="loadingUpload" :data="pictureList">
            <el-table-column :label="queryParamsUpload.isVideo==0?'商品图片':'商品视频'" align="center" prop="productPic">
              <template slot-scope="scope">
                <imageUpload v-model="scope.row.productPic" v-if="queryParamsUpload.isVideo==0||queryParamsUpload.isVideo==null" :noDel="true" :table="scope.row.productId+':'+'product'+':'+'pic'"/>
                <FileUploadV v-model="scope.row.productPic" v-if="queryParamsUpload.isVideo==1&&scope.row.productPic===null" :table="scope.row.productId+':'+'product'+':'+'vid'"/>
                <video controls="controls" width="30%" v-if="queryParamsUpload.isVideo==1&&scope.row.productPic!=null">
                  <source type="video/mp4" :src="scope.row.productPic"/>
                </video>
              </template>
            </el-table-column>   
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="60">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDeleteUpload(scope.$index,scope.row)"
                  v-hasPermi="['system:picture:remove']"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="totalUpload>0"
            :total="totalUpload"
            :page.sync="queryParamsUpload.pageNum"
            :limit.sync="queryParamsUpload.pageSize"
            @pagination="getListUpload"
          />
        </ul>
      </div>      
    </el-dialog>
    <qrcodeD ref="qrcodeD" :dialogVisible="openQrCode" @cancelQr="cancelQr"></qrcodeD>
  </div>
</template>

<script>
import { listProduct, getProduct, delProduct, addProduct, updateProduct } from "@/api/business/product";
import { listDept } from "@/api/system/dept";
import { listUser } from "@/api/system/user";
import { listPicture, delPicture } from "@/api/business/picture";
import ImageUpload from '@/components/ImageUpload';
import FileUploadV from '@/components/FileUploadV';
import VideoPlay from '@/components/VideoPlay';
import { getParamQueryString } from '@/utils/commonUtils';
import { downLoadZip } from "@/utils/zipdownload";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import qrcodeD from "@/components/qrcodeD";
export default {
  name: "product",
  components: {
    Treeselect,
    ImageUpload,
    FileUploadV,
    VideoPlay,
    qrcodeD
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      loadingUpload: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      totalUpload: 0,
      // 商品表格数据
      productList: [],
      // 商品图片表格数据
      pictureList: [],
      answerData: [],
      expandKeys: [],
      // 弹出层标题
      title: "",
      titleUpload: "",
      // 是否显示弹出层
      open: false,
      openUpload: false,
      openQrCode: false,
      productTypes: [],
      productTypems: [],
      productTypeds: [],
      yesNo: [],
      userList: [],
      productLabels: [],
      deptOptions: [],//商铺树选项
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        isVideo: 0,
        shopId: null,
        shopName: null,
        labelId: null,
        userId: null,
        userPic: null,
        productType: null,
        productTitle: null,
        productDesc: null,
        productDetail: null
      },
      queryParamsUpload: {
        pageNum: 1,
        pageSize: 10,
        productId: null,
        isVideo: 0
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        userId: [
          { required: true, message: "发布用户不能为空", trigger: "blur" }
        ],
        productType: [
          { required: true, message: "商品大类不能为空", trigger: "change" }
        ],
        isVideo: [
          { required: true, message: "是否视频不能为空", trigger: "change" }
        ],
        productTitle: [
          { required: true, message: "商品名称不能为空", trigger: "blur" }
        ],
        productDesc: [
          { required: true, message: "商品描述不能为空", trigger: "blur" }
        ],
        productPrice: [
          { required: true, message: "商品价格不能为空", trigger: "blur" }
        ],
        discount: [
          { required: true, message: "分销折扣不能为空", trigger: "blur" }
        ],
        shopId: [
          { required: true, message: "所属商铺不能为空", trigger: "blur" }
        ]
      }
    };
  },  
  created() {
    let local = location.href;
		let productType = getParamQueryString(local, "productType");
		this.queryParams.productType = productType;
    this.getList();
    this.getDicts('product_type').then(response => {
      this.productTypes = response.data;
    });
    this.getDicts('product_label').then(response => {
      this.productLabels = response.data;
    });
    this.getDicts('yes_no').then(response => {
      response.data.forEach(item => {
        if (item.dictValue==0) {
          this.yesNo.push(item);
        }
      })
    });
    listUser().then(response => {
      this.userList = response.rows;
    });
    listDept().then(response => {
      this.deptOptions = this.handleTree(response.data, "deptId");
    });
  },
  methods: {
    /** 转换学校数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.deptId,
        label: node.deptName,
        children: node.children
      };
    },
    getProductType(row) {
      for (let i in this.productTypes) {
        if (this.productTypes[i].dictValue === row.productType+'') {
          return this.productTypes[i].dictLabel;
        }
      }
    },
    getYesNo(row) {
      for (let i in this.yesNo) {
        if (this.yesNo[i].dictValue === row.isVideo+'') {
          return this.yesNo[i].dictLabel;
        }
      }
    },
    sortChange(column) {
      this.loading = true;
      if (column.prop === 'orderNum') {
        this.queryParams.order = 'order_num';
      } else if (column.prop === 'productPrice') {
        this.queryParams.order = 'product_price';
      } else if (column.prop === 'productDiscount') {
        this.queryParams.order = 'product_discount';
      } else if (column.prop === 'createTime') {
        this.queryParams.order = 'create_time';
      } else {
        this.queryParams.order = column.prop;
      }
      if (column.order === 'ascending') {
        this.queryParams.orderType = 'asc';
      } else if (column.order === 'descending') {
        this.queryParams.orderType = 'desc';
      }      
      listProduct(this.queryParams).then(response => {
        this.productList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    selectBType(value) {
      if (value==null||value==undefined) {
        return;
      }
      this.productTypems = [];
      let pValue = value.substring(0,1);
      this.getDicts("product_typem:"+pValue).then(response => {
        response.data.forEach(item => {
          this.productTypems.push(item);
        });
      });
    },
    selectMType(value) {
      if (value==null||value==undefined) {
        return;
      }
      this.productTypeds = [];
      let cValue = value.substring(0,3);
      this.getDicts("product_typed:"+cValue).then(response => {
        response.data.forEach(item => {
          this.productTypeds.push(item);
        });
      });
    },
    /** 查询商品列表 */
    getList() {
      this.loading = true;
      listProduct(this.queryParams).then(response => {
        this.productList = response.rows;        
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 查询商品图片列表 */
    getListUpload() {
      this.loadingUpload = true;
      this.pictureList = [];
      listPicture(this.queryParamsUpload).then(response => {
        this.pictureList = response.rows;
        this.totalUpload = response.total;
        this.loadingUpload = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    cancelUpload() {
      this.openUpload = false;
    },
    // 表单重置
    reset() {
      this.form = {isVideo:'0'};
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    handleType() {
      this.$router.push("/system/dict-data/index/14");
    },
    handleLabel() {
      this.$router.push("/system/dict-data/index/15");
    },
    creatQrCode(row) {
      let host = '';
      if (row.appId=='wxae0f0d0aef1a8645') {
        host = 'train.shudingkj.com';
      }else if (row.appId=='wx49c781286d16deea') {
        host = 'sell.shudingkj.com';
      }else if (row.appId=='wxff9cb9b0b37dfef8') {
        host = 'jkhmzw.shudingkj.com';
      }
      let curPath = 'http://'+host+'/pages/detail/index?id='+row.id;
      this.$refs.qrcodeD.paths = curPath;
      this.openQrCode = true;
    },
    cancelQr() {
      this.openQrCode = false;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加商品信息";
      listUser().then(response => {
        this.userList = response.rows;
      });
    },
    handleAddUpload() {
      let rowPic = {
        id: null,
        productId: this.queryParamsUpload.productId,
        isVideo: this.queryParamsUpload.isVideo,
        productPic: null
      }
      this.pictureList.push(rowPic)
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getProduct(id).then(response => {
        this.form = response.data;
        if (this.form.labelId) {
          let labelAry = this.form.labelId.split(',');
          let labelIdAry = new Array();
          labelAry.forEach(item => {
            labelIdAry.push(item);
          })
          this.form.labelId = labelIdAry;
        }
        this.form.isVideo = this.form.isVideo+'';
        this.form.productType = this.form.productType+'';
        this.selectBType(this.form.productType);
        if (this.form.productTypem) {
          this.form.productTypem = this.form.productTypem+'';
          this.selectMType(this.form.productTypem);
        }
        if (this.form.productTyped) {
          this.form.productTyped = this.form.productTyped+'';
        }
        this.open = true;
        this.title = "修改商品信息";
      });
    },
    handleUpdateUpload(row) {
      const id = row.id || this.ids
      this.queryParamsUpload.productId = id;
      this.queryParamsUpload.productType = row.productType;
      this.queryParamsUpload.isVideo = row.isVideo;
      this.openUpload = true;
      this.titleUpload = "上传商品信息";
      this.getListUpload();
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.labelId) {
            this.form.labelId = this.form.labelId.join(',');
          }
          if (this.form.id != null) {            
            updateProduct(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addProduct(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除商品信息编号为"' + ids + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delProduct(ids);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
    },
    handleDeleteUpload(index,row) {
      const ids = row.id || this.ids;
      if (ids.length===0) {
        this.pictureList.splice(index,1);
      }else {
        this.$confirm('是否确认删除商品图片编号为"' + ids + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delPicture(ids);
        }).then(() => {
          this.getListUpload();
          this.$modal.msgSuccess("删除成功");
        })
      }
    },
    /** 导出按钮操作 */
    handleExport() {
      const ids = this.ids;
      this.$confirm('是否确认导出选中的商品图片?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {          
          downLoadZip('/business/product/export/'+ids, "商品信息");
        }).then(response => {
          this.download(response.msg);
        })
    }
  }
};
</script>
<style scoped>
.user-avatar {
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 10px;
}
.sketch_content {
  overflow: auto;
  height: 750px;
  border-top: 1px solid #eff1f4;
  border-bottom: 1px solid #eff1f4;
  padding: 0px 30px 11px 27px;
}
.sketch_content::-webkit-scrollbar {
  width: 3px;
}
.sketch_content::-webkit-scrollbar-thumb {
  background: #8798AF;
  border-radius: 2px;
}
.sketch_content::-webkit-scrollbar-track {
  background: transparent;
}
</style>